<template>
  <div class="loginBox w_100 h_100 clearfix"> 
  	<div class="login">  	
  		<p class="name">安心宿运维中心</p>
		  <p><img src="../assets/images/logintitle-line.png" alt=""></p>

		<el-form :model="ruleForm" :rules="rules" ref="ruleFormref" label-width="100px" class="demo-ruleForm">

		  <el-form-item prop="loginName">
		    <el-input type="text" v-model="ruleForm.loginName" name="loginName" autocomplete="off" clearable placeholder="请输入登陆账号">
		    	
		    </el-input>
		    <i class="loginTxt el-icon-user"></i>
		  </el-form-item>
		   <el-form-item prop="password">
		    <el-input  type="password" v-model="ruleForm.password" name="loginPass" autocomplete="off" clearable placeholder="请输入密码">
		    	
		    </el-input>
		    <i class="loginTxt el-icon-unlock"></i>
		  </el-form-item>				
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('ruleFormref')">登录</el-button>		   
		  </el-form-item>
		</el-form>
		<!-- <div class="login-agreement"><el-checkbox v-model="checked" style="padding-right:10px"></el-checkbox>已阅读并<span>《云创安全用户协议》</span></div> -->
  	</div>

  </div>
</template>

<script>
export default {
    data() {
      return {
		checked: false ,
         ruleForm: {
			loginName:null,
			password:null			         
        },
        rules: {
          loginName: [
            { required: true, message: '不能为空', trigger: 'blur' }         
          ],
          password: [
            { required: true, message: '不能为空', trigger: 'blur' }
          
          ],
         
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {                                               
				this.$axios({
				    method: "post",
				    url: "/login",
				    data: this.ruleForm,
				    headers: {
				        "Content-Type": "application/json;charset=UTF-8"
				    }
				})
                .then(res=> {               
                    if (res.data.code == 0) { 
                    	this.$message({
				          message: '登录成功！',
				          type: 'success'
				        });
						localStorage.setItem("loginInfo",JSON.stringify(res.data.data)); //唯一标识 token  缓存				                    	
						localStorage.setItem("token",JSON.stringify(res.data.data.token)); //唯一标识 token  缓存			                                              
                    	this.$router.push({  // 登录成功  路由跳转
                    	 	path: "/home/warn"
                        });                                                          
                  	} else {                      
	                    this.$message({
				          showClose: true,
				          message: res.data.msg,
				          type: 'warning'
				        });
                   }
                })
                .catch(error=>{
					this.$message({
						showClose: true,
						message: '错了哦，这是一条错误消息',
						type: 'error'
					});
                });               
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  
    }
  }
</script>

<style lang="less" scoped>
.loginBox{
	background: url("../assets/images/loginbg.png") no-repeat center center;
	background-size: cover;
	overflow:hidden;
	position:relative;
	.login{
		width:449px;
		height:583px;
		background:rgba(255,255,255,1);
		border-radius:16px;
		position: absolute;
	    right: 5%;
	    top: 50%;
		transform: translate(-40%, -50%);		
		.name{
			font-size: 22px;
			padding-top:90px;
			padding-bottom: 20px;
		}
	}
	.loginTxt{
		position:absolute;
		left:15px;
		top:15px;
		font-size: 22px;
		color:#6485F0;		
	}
	
}
</style>
<style>
.loginBox .el-form-item__content{	
	margin-left:0px !important;		
} 
.loginBox .el-form{
	padding-left: 6%;
	padding-right:6%;
	padding-top: 40px

}
.loginBox .el-input__inner{
	height:48px;
	background:#fff;
	border: none;
	border-bottom: 1px solid #f5f5f5 !important;
	padding-left: 50px;
	font-size: 14px;
}
.loginBox .el-button--primary{
	width:340px;
	height:48px;
	background:rgba(9,65,157,1);
	box-shadow:5px 9px 10px 0px rgba(9,65,157,0.23);
	border-radius:24px;
}
.loginBox .el-input__suffix{
	margin-right: 30px;

}
.loginBox .el-form-item__content{
	position: relative;
}
.loginBox  .el-form-item__error{
	padding-left: 50px;
	font-size: 14px;
	padding-top: 10px;
}
.loginBox .el-form-item{
	margin-bottom: 40px;
}
.loginBox .el-form-item.is-error .el-input__inner{
	   border-color: #f5f5f5 !important;
	border-bottom: 1px solid #f5f5f5 !important;
}
.loginBox .el-form-item.is-error .el-input__inner,
 .loginBox .el-form-item.is-error .el-input__inner:focus,
  .loginBox .el-form-item.is-error .el-textarea__inner, 
  .loginBox .el-form-item.is-error .el-textarea__inner:focus, 
  .loginBox .el-message-box__input input.invalid,
   .loginBox .el-message-box__input input.invalid:focus{
	   border-color: #f5f5f5 !important;
	border-bottom: 1px solid #f5f5f5 !important;
   }
   .login-agreement{
	   font-size: 12px;
	   color: #797979;
   }
   .login-agreement span{
	color: #EF4B54;
   }
</style>
